<template>
    <div style="margin-top: 20px">
        <h1 style="text-align: center;font-family: 'Droid Sans Mono'">-展示专区-</h1>
        <div class="goodRecommend" style="margin-top: 30px;position: relative;">
            <!--侧边-->
            <div class="aside">
                <img style="width: 100%;height: 100%;" :src="show.imgurl" alt="">
            </div>
            <!--右侧-->
            <div class="content">
                <!--上部分-->
                <div class="m1">
                    <div class="p1">
                        <!--autoplay="autoplay"-->
                        <video style="height:100%;width:100%;border-radius: 5px" controls="controls"
                               :src="show.videourl" muted
                               loop="loop"></video>
                    </div>
                    <!--右侧小图-->
                    <div class="p2">
                        <img style="width: 100%;height: 100%;" :src="show.imgurl2" alt="">
                    </div>
                </div>
                <!--下部分商品列表-->
                <div class="m2">
                    <div class="p3" style="background-color: white" v-for="(item,index) in
                        show.pmsProducts" :key="index">
                        <div class="goods-item brick-item" >
                            <a target="_blank" :href="'/#/detail/'+item.id" >
                                <img class="img" :src="item.pic">
                                <h3 class="name ellipsis" style="color: #424242">{{item.name}}</h3>
                                <span class="desc ellipsis" style="color: #424242">{{item.subTitle}}</span>
                                <div class="price">
                                    <span style="color: #ff6300">{{item.price}}元</span>
                                    <span v-if="item.sub">起</span>
                                    <del v-if="item.originalPrice" style="color: #80c58a">{{item.originalPrice}}元</del>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "GoodRecommend",
        data(){
            return{
                show:{
                    id: 1,
                    categoryName: "",
                    status: 1,
                    imgurl: "",
                    imgurl2: "",
                    videourl: "",
                    products: null,
                    pmsProducts: []
                }
            }
        },
        mounted() {
           this.getIchShow();
        },
        methods:{
            getIchShow(){
                this.axios.get('/sms/smsIchShow/info').then(response=>{
                    window.console.log(response)
                    this.show=response;
                })
            }
        }
    }
</script>

<style scoped>
    .aside{
        float: left;
        /*background-color: #757575;*/
        width: 295px;
        height: 685px;

    }
    .content{
        border-radius: 5px;
        height: 690px;
        width: 100%;
    }
    .m1{
        display: flex;
        position: relative;
        height: 335px;
        width: 990px;
        border-radius: 5px;
    }
    .p1{
        width: 720px;
        height: 100%;
        margin-left: 20px;
       /* background-color: #757575;*/
        border-radius: 5px;

    }

    .p2:hover{
        /*border: 2px solid #7ECF68;*/
    }

    .p2{
        border:0;
        width: 230px;
        height: 333px;
        margin-left: 20px;
        /*background-color: #80c58a;*/
        border-radius: 5px;
    }


    .m2{
        margin-top: 20px;
        display: flex;
        position: relative;
        height: 315px;
        width: 990px;
        border-radius: 5px;
    }
    .p3{
        border: 0;
        width: 230px;
        height: 333px;
        margin-left: 20px;
       /* background-color: #757575;*/
        border-radius: 5px;

    }

    .p3:hover{
       /* border: 2px solid #80c58a;
        border-radius: 5px;*/
    }


    .goodRecommend {
        position: relative;
        text-align: center;
        width: 1226px;
        height: auto;
        margin: 0 auto;
        display: flex;
    }

    .goodStyle {
        height: 340px;
        margin-top: -360px;
        border-radius: 5px;
        background-color: white;
    }

    .img {
        width: 190px;
        height: 246px;
        margin: 12px auto 18px;
        border-radius: 5px;
    }

    .img2 {
        width: 220px;
        height: 256px;
        margin: 12px auto 18px;
        border-radius: 5px;
    }

    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #e5e9f2;
    }

    .bg-purple {
        background: white;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 5px;
        min-height: 360px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>